<template>
	<view>
		<u-modal :show="show" title=" " :showConfirmButton="false">
			<view>
				<view class="header display_between">
					<text>{{states==1?'转赠':'寄售'}}</text>
					<u-icon name="close" @click="$emit('setShow')"></u-icon>
				</view>
                <!-- 转赠 -->
				<template v-if="states==1">
					<u--input v-model="tel" border="surround" shape="circle" @input="inputTelInfo"></u--input> 
                    <view class="recipient-name" v-if="recipientInfo">
                        <text>接收人姓名：{{ recipientInfo.name }}</text>
                    </view>
					<view class="text" v-if="content">
						<mp-html :content="content.contents" />
					</view>
				</template>
                <!-- 寄售 -->
				<view class="" v-else>
					<view class="text" v-if="content">
						<mp-html :content="content.contents" />
					</view>
					<view class="radio">
						<u-checkbox-group @change="change">
							<u-checkbox v-model="value" shape="circle" label="点击即同意平台"></u-checkbox>
							<text @click="$u.route('/pages/user/ConsignmentAgreement/ConsignmentAgreement')" style="color: #B29062;">《寄售协议》</text>
						</u-checkbox-group>
						

					</view>
				</view>
				<view class="but">
					<view class="close" @click="$emit('setShow')">取消</view>
					<view class="open" @click="$emit('setOpen',tel)">确认</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	export default {
		components: {
			mpHtml
		},
		name: "Transfer",
		props: ['show', 'setShow', 'setOpen', 'states'],
		data() {
			return {
				tel: '',
				value: true,
				check:[],
                content: null,
                recipientInfo: null
			};
		},
        watch: {
            states: {
                immediate:true,
                handler(){
                    if(this.states){
                        this.getData()
                    }
                }
            },
            show: {
                handler(){
                    this.check = []
                }
            }
        },
		methods: {
			close() {
				this.show = false
			},
			change(a){
				console.log(a,'aa');
				this.check=a
			},
            getData(id){
            	this.$u.request('home.sing_id_one', { 
                    // 转赠   寄售
                    id:  this.states == 1 ? 5 : 2,
                })
            	.then(res => {
            		this.content = res.data
            		
            	}).catch(e => {
            		
            	})
            },
            // 输入手机号后查询信息
            getTelInfo(){
                
            },
            inputTelInfo(value){
                if(uni.$u.test.mobile(this.tel)){
                    // 宏任务，避免与 input事件冲突
                     setTimeout(() => {
                         this.$u.request('cangjiu.tel_user_one', {
                             tel: this.tel
                         })
                         .then(res => {
                         	this.recipientInfo = res.data
                         }).catch(e => {
                         	this.recipientInfo = null
                         })
                     }, 0)
                }else {
                    this.recipientInfo = null
                }
                
            }
		}
	}
</script>

<style scoped lang="scss">
	.header {
		width: 100%;
		margin-bottom: 30rpx;

		>text {
			font-size: 40rpx;
			font-weight: 600;
		}
	}

	.but {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 600rpx;
		height: 80rpx;

		view {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 240rpx;
			height: 80rpx;
			border-radius: 80rpx;
		}

		.close {
			border: 1rpx solid #000;
			color: #000;
		}

		.open {
			background-color: #B29062;
			color: #ffffff;

		}
	}

	v-deep.u-inputs {
		background-color: #000 !important;
	}

	.text {
		color: #999;
		font-size: 26rpx;
		margin: 30rpx 0;
	}

	.radio {
		color: #999;
		margin: 20rpx 0 40rpx 0;
	}
    
    
    .recipient-name{
        font-size: 26rpx;
        margin: 20rpx 0 0 0;
    }
</style>